<template>
  <div class="login-container">
    <!-- 配置from表单验证 -->
    <!-- 1.modle绑定表单对应的数据对象 -->
    <!-- 给需要验证的表单项绑定el-form-item 绑定prop属性
    注意:prop需要指定表单数据对象的数据名称-->
    <!-- 给el-from 组件添加rules属性 并且给属性配置验证规则对象formRules -->
    <!-- 手动触发表单验证给el-from 组件添加ref获得dom元素
    通过获取的dom调用validate方法  -->
    <el-form class="login-form" ref="login-form" :model="user" :rules="formRules">
      <div class="login-head"></div>
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
       <el-form-item prop="agree">
         <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onLogin" class="login-btn" :loading="loginLoading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import request from '@/utils/request.js'
import { login } from '@/api/user.js'
export default {
  name: 'LonginIndex',
  data () {
    return {
      user: {
        mobile: '',
        code: '',
        agree: false // 协议选中状态
      },
      // checked: false, // 协议选中状态
      loginLoading: false,
      formRules: { // 表单验证规则配置
      // 数据名prop对应的属性值:[] trigger验证机制 失去标点触发
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'change' },
          { pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '请输入正确格式手机号', trigger: 'change' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '请输入正确格式验证码', trigger: 'change' }
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请勾选协议'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    onLogin () {
      // 检测表单是否验证通过
      this.$refs['login-form'].validate(valid => {
        if (!valid) {
          return
        }
        this.login()
      })
    },
    login () {
      this.loginLoading = true
      const user = this.user
      login(user).then(res => {
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        this.loginLoading = false
        window.localStorage.setItem('user', JSON.stringify(res.data.data))
        this.$router.push({
          name: 'home'
        })
      }).catch(err => { // 登录失败
        console.log('登录失败', err)
        this.$message.error('登录失败，手机号或验证码错误')
        console.log(user)
        this.loginLoading = false
      })
    }
  }
}
</script>
<style lang="less">
.login-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./login_bg.jpg') no-repeat;
    background-size: cover;
    .login-form {
        background-color: #fff;
        padding: 30px 50px;
        min-width: 300px;
        .login-head {
        margin-bottom: 20px;
        height: 50px;
        background: url('./logo_index.png') no-repeat;
        background-size: contain;
        background-position: center center;
    }
        .login-btn {
            width: 100%;
        }
    }
}
</style>
